<template>
	<view class="content">
		<uni-section titleColor="#333333" titleFontSize="30rpx" title="可提现金额（元）" type="line"></uni-section>
		<view style="display: flex;margin:0rpx 0rpx 40rpx 0rpx;">
			<p class="leftText"><text style="font-size: 40rpx;">￥</text>{{userInfo.commissionBalance}}</p>
			<!-- <p class="rightText">冻结金额：￥0</p> -->
		</view>
		<view class="reward">
			<p style="margin-bottom: 20rpx;">提现金额</p>
			<view class='list'>
				<view class='name'>￥</view>
				<input class='input' v-model="operatingAmount" placeholder='请输入提现金额' name="name"></input>
				<p class="all" @click="allMoney">全部提现</p>
			</view>
			<p class="xian"></p>
		</view>
		<view class="" style="height: 20rpx;"></view>
		<uni-section titleColor="#333333" titleFontSize="30rpx" title="请选择提现方式" type="line"></uni-section>
		<view class="modeBox">
			<view class="pay" :class="{ active: dataList.type === 0 }" @click="selectWithdrawalMethod(0)">
				<image class="wxImg" src="../../../static/myImages/wx.png" mode=""></image>
				<p class="wxText">微信</p>
			</view>
			<view class="pay" :class="{ active: dataList.type === 1 }" @click="selectWithdrawalMethod(1)">
				<image class="AlipayImg" src="../../../static/myImages/Alipay.png" mode=""></image>
				<p class="AlipayText">支付宝</p>
			</view>
			<view class="pay" :class="{ active: dataList.type === 3 }" @click="selectWithdrawalMethod(3)">
				<image class="payImg" src="../../../static/myImages/pay.png" mode=""></image>
				<p class="payText">银行卡</p>
			</view>
		</view>
		<view class="information" v-if="dataList.type === 3">
			<view style="height: 1rpx;background-color:#DDDDDD;"></view>
			<view class="informationForm">
				<p class="leftTitle">收款人姓名</p>
				<input class="rightInput" v-model="dataList.nameOfPaye" type="text" placeholder="请输入收款人姓名" />
			</view>
			<view style="height: 1rpx;background-color:#DDDDDD;"></view>
			<view class="informationForm">
				<p class="leftTitle">银行卡号</p>
				<input class="rightInput" v-model="dataList.creditCardNumbers" type="text" placeholder="请输入您的银行卡号" />
			</view>
			<view style="height: 1rpx;background-color:#DDDDDD;"></view>
			<view class="informationForm">
				<p class="leftTitle">开户行</p>
				<view class="pickerBox">
					<picker @change="bindPickerChange" :value="dataList.openingBankId" :range="cardList"
						range-key="openingBank">
						<view class="picker">
							{{ dataList.openingBank || '请选择开户行' }}
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="information" v-if="dataList.type === 0 || dataList.type === 1">
			<view style="height: 1rpx;background-color:#DDDDDD;"></view>
			 <view class="informationForm" v-if="dataList.type === 0">
				<p class="leftTitle">微信账号</p>
				<input class="rightInput" v-model="dataList.account" type="text" placeholder="请输入您的微信账号" />
			</view>
			<view class="informationForm" v-if="dataList.type === 1">
				<p class="leftTitle">支付宝账号</p>
				<input class="rightInput" v-model="dataList.account" type="text" placeholder="请输入您的支付宝账号" />
			</view>
			<view style="height: 1rpx;background-color:#DDDDDD;"></view>
			<view class="informationForm">
				<p class="leftTitle">收款码</p>
				<view class="upImg" v-if="dataList.qrCodeUrl==''" @click="chooseImage">
					<image src="../../../static/myImages/upImg.png" mode=""></image>
					<p>上传图片</p>
				</view>
				<image class="upImg" v-if="dataList.qrCodeUrl!==''" @click="chooseImage" :src="dataList.qrCodeUrl"
					mode=""></image>
			</view>
		</view>
		<view class="bottomBox">
			<view class="button" @click="addWithdrawal">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		getWithdrawBank,
		addWithdrawalSave
	} from '@/api/money.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';

	export default {
		data() {
			return {
				operatingAmount: '',
				dataList: {
					type: 0, // 默认选中微信
					nameOfPaye: '',
					creditCardNumbers: '',
					openingBank: '',
					openingBankId: '', // 添加开户行ID字段
					account: '',
					qrCodeUrl: '',
				},
				cardList: [],
				userInfo: []
			}
		},
		onLoad() {

		},
		mounted() {
			this.getUser()
			this.getWithdraw()
		},
		methods: {
			//获取用户信息
			getUser() {
				getUserInfo().then(res => {
					this.userInfo = res.data
					console.log(this.userInfo, "this.userInfo")
				});
			},
			//上传收款码
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.uploadImage(tempFilePath);
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			uploadImage(filePath) {
				uploadImage(filePath, 'avatars/', (url) => {
					this.dataList.qrCodeUrl = url;
					console.log(url, "url")
					uni.showToast({
						title: '收款码上传成功',
					});
				}, (error) => {
					uni.showToast({
						title: '收款码上传失败: ' + error.message,
					});
				});
			},
			//全部提现
			allMoney() {
				this.operatingAmount = this.userInfo.commissionBalance;
			},
			//提现方式切换
			selectWithdrawalMethod(id) {
				this.dataList = {
					type: id,
					nameOfPaye: '',
					creditCardNumbers: '',
					openingBank: '',
					openingBankId: '',
					nickName: '',
					alipayAccount: '',
					qrCodeUrl: ''
				};
			},
			//获取银行卡开户行
			getWithdraw() {
				const params = {
					pageSize: 99,
					pageNumber: 1
				};
				getWithdrawBank(params).then(res => {
					this.cardList = res.data.records
				})
			},
			//选择开户行
			bindPickerChange(e) {
				const index = e.detail.value;
				const selectedBank = this.cardList[index];
				this.dataList.openingBank = selectedBank.openingBank;
				this.dataList.openingBankId = selectedBank.id;
			},
			//提现
			addWithdrawal() {
				// 表单验证
				if (!this.operatingAmount) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					});
					return;
				}

				if (this.dataList.type === 3) {
					if (!this.dataList.nameOfPaye) {
						uni.showToast({
							title: '请输入收款人姓名',
							icon: "none",
						});
						return;
					}
					if (!this.dataList.creditCardNumbers) {
						uni.showToast({
							title: '请输入银行卡号',
							icon: 'none'
						});
						return;
					}
					if (!this.dataList.openingBankId) {
						uni.showToast({
							title: '请选择开户行',
							icon: 'none'
						});
						return;
					}
				} else if (this.dataList.type === 0) {
					if (!this.dataList.account) {
						uni.showToast({
							title: '请输入微信账号',
							icon: 'none'
						});
						return;
					}
					if (!this.dataList.qrCodeUrl) {
						uni.showToast({
							title: '请上传收款码',
							icon: 'none'
						});
						return;
					}
				} else if (this.dataList.type === 1) {
					if (!this.dataList.account) {
						uni.showToast({
							title: '请输入支付宝账号',
							icon: 'none'
						});
						return;
					}
					if (!this.dataList.qrCodeUrl) {
						uni.showToast({
							title: '请上传收款码',
							icon: 'none'
						});
						return;
					}
				}

				// 提交表单数据
				const formData = {
					operatingAmount: this.operatingAmount,
					...this.dataList
				};
				console.log(formData, 'formData')
				// 调用API提交表单数据
				addWithdrawalSave(formData).then(res => {
					uni.showToast({
						title: '提现成功',
						icon: 'none'
					});
					this.getUser()
				})

			}
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss'; // 导入全局 SCSS 变量文件

	.content {
		min-height: 100vh;
		background-color: $uni-bg-color-grey;
		padding: 20rpx;
	}

	.uni-section-header {
		background-color: $uni-bg-color-grey !important;
	}

	.uni-section .uni-section-header__decoration {
		background-color: $uni-bg-color-orange !important;
	}

	.leftText {
		width: 50%;
		font-size: 70rpx;
		font-weight: bold;
	}

	.rightText {
		width: 50%;
		text-align: right;
		font-size: 30rpx;
		color: $uni-text-color;
		padding-top: 40rpx;
	}

	.reward {
		background-color: $uni-color-fff;
		padding: 40rpx 40rpx 60rpx 40rpx;

		.list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.name {
				width: 69rpx;
				height: 100rpx;
				font-weight: bold;
				font-size: 60rpx;
				color: $uni-text-color;
				line-height: 100rpx;
			}

			.input {
				width: 400rpx;
				height: 100rpx;
				font-weight: 400;
				font-size: 50rpx;
				line-height: 100rpx;
			}

			.all {
				width: 140rpx;
				height: 100rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: $uni-color-orange;
				line-height: 100rpx;
			}

		}

		.xian {
			height: 1rpx;
			background: #E3E3E3;
		}

		.moneyBoxBnt {
			font-size: 28rpx;
			color: $uni-color-fff;
			width: 258rpx;
			height: 68rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 58rpx;
			background-color: #D3AB88 !important;
			border: 4rpx solid $uni-color-fff;
			margin: 20rpx auto;
		}
	}

	.modeBox {
		display: flex;

		.pay {
			width: 190rpx;
			height: 62rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 2rpx solid #CECECE;
			display: flex;
			margin-right: 22rpx;

			&.active {
				border-color: #FF5B13;
			}

			.payImg {
				width: 46rpx;
				height: 26rpx;
				margin: 20rpx;
			}

			.wxImg {
				width: 40rpx;
				height: 40rpx;
				margin: 12rpx 24rpx;
			}

			.AlipayImg {
				width: 40rpx;
				height: 40rpx;
				margin: 12rpx 24rpx;
			}

			.payText {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-top: 12rpx;
			}

			.wxText {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-top: 12rpx;
			}

			.AlipayText {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-top: 12rpx;
			}
		}
	}

	.information {
		margin-top: 42rpx;
		padding: 20rpx;

		.informationForm {
			height: 86rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.leftTitle {
				width: 160rpx;
				line-height: 88rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				font-weight: 600;
				line-height: 87rpx;
				text-align: left;
				font-style: normal;
			}

			.rightInput {
				width: 510rpx;
				height: 88rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				line-height: 88rpx;
				text-align: left;
				font-style: normal;
			}

			.pickerBox {
				width: 510rpx;
				height: 88rpx;
				font-weight: 500;
				font-size: 26rpx;
				line-height: 88rpx;
				text-align: left;
				font-style: normal;
			}

			.upImg {
				width: 140rpx;
				height: 140rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				border: 2rpx solid #D6D6D6;
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				text-align: center;

				image {
					width: 42rpx;
					height: 38rpx;
					margin-top: 28rpx;
				}
			}
		}
	}

	.bottomBox {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		background-color: $uni-bg-color-white; // 使用变量代替硬编码颜色
		display: flex;
		margin-left: -20rpx;

		.button {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: $uni-bg-color-orange; // 使用变量代替硬编码颜色
			color: #FFFFFF;
			border-radius: 80rpx;
			margin: 20rpx auto;
		}
	}
</style>